<template>
   <div class="bar-chart">
    <img v-if="isDesigner" :src="imgSrc" alt="" style="width: 200px">
    <div v-else ref="chart" :style="{ width: chartTransWidth, height: chartTransHeight }"></div>
  </div>
</template>

<script>
import { isEmpty } from "lodash"
import { loadRoute3Path } from '@/utils/loadRemote'
export default {
  name: 'bar',
  props: {
    value: null,
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    barLists: {
      type: Array,
      default: () => []
    },
    chartWidth: {
      type: Number,
      default: 200
    },
    chartHeight: {
      type: Number,
      default: 100
    },
    textRotate: {
      default: 0
    }
  },
  data() {
    return {
      initLists: [{name: "Mon", value: "120"},{name: "Tue", value: "200"},{name: "Wed", value: "150"},{name: "Thu", value: "80"},{name: "Fri", value: "70"}],
      myChart: null,
      imgSrc: require("@/icons/svg/bar.jpg")
    }
  },
  mounted() {
    if (!this.isDesigner) {
      this.drawChart()
    }
  },
  computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    lists() {
     return this.isDesigner ? this.initLists : isEmpty(this.barLists) ? this.initLists : this.barLists
    },
    chartTransWidth() {
      return this.chartWidth + 'px'
    },
    chartTransHeight() {
      return this.chartHeight + 'px'
    },
    prixPath() {
      return loadRoute3Path('')
    }
  },
  methods: {
      drawChart() {
        if (typeof window.echarts === 'function') {
          this.initEcharts()
        } else {
          const script = document.createElement('script')
          script.src = `${this.prixPath}/static/js/echarts.js`
          script.onload = this.initEcharts.bind(this)
          document.head.appendChild(script)
        }
      

    },
    initEcharts() {
				setTimeout(() => {
          const el = this.$refs.chart
					this.myChart = echarts.init(el, '')
          const option = this.isDesigner ? this.initLists : {
            tooltip: {
              // 触发类型，默认数据触发，可选为：'item' | 'axis'
              trigger: 'axis'
          },
        xAxis: {
          type: "category",
          data: this.lists.map((item) => item.name),
          axisLabel: {
            // formatter: function (value) {
            //     return value.length > 5 ? value.slice(0, 5) + '...' : value;
            // },
            rotate: this.textRotate || 0 // 旋转30度，根据实际情况调整
          }
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.lists.map((item) => item.value),
            type: "bar",
            zlevel: 0,
            z: 2,
          },
        ],
      };
				this.myChart.setOption(option)
				})
				window.addEventListener('resize', () => {
					this.myChart.resize()
				});
			},
  }
};
</script>
<style lang="scss" scoped>
.bar-chart {
  width: 100%;
  z-index: 1000;
}
</style>
